<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>服务详情 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .service-image-indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ddd;
      margin: 0 3px;
    }
    
    .service-image-indicator.active {
      background-color: var(--primary);
      width: 8px;
      height: 8px;
    }
    
    .bottom-bar {
      border-top: 1px solid var(--border);
    }
    
    .package-item {
      border: 1px solid #ddd;
      border-radius: 12px;
    }
    
    .package-item.active {
      border-color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .time-slot {
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    
    .time-slot.active {
      border-color: var(--primary);
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .worker-avatar {
      background-color: #ffe2c6;
      color: var(--primary);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">服务详情</h1>
      <div class="flex">
        <a href="#" class="mr-4">
          <i class="fas fa-share-alt text-lg"></i>
        </a>
        <a href="#" class="relative">
          <i class="far fa-heart text-lg"></i>
        </a>
      </div>
    </div>
    
    <!-- 服务图片轮播 -->
    <div class="relative">
      <div class="w-full h-64 bg-gray-100">
        <img src="https://source.unsplash.com/random/800x600/?nursing" alt="居家护理服务" class="w-full h-full object-cover">
      </div>
      
      <!-- 图片指示器 -->
      <div class="absolute bottom-4 left-0 right-0 flex justify-center items-center">
        <div class="service-image-indicator active"></div>
        <div class="service-image-indicator"></div>
        <div class="service-image-indicator"></div>
        <div class="service-image-indicator"></div>
      </div>
    </div>
    
    <!-- 服务信息 -->
    <div class="bg-white p-4">
      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-xl font-bold">专业居家护理服务</h2>
          <p class="text-sm text-gray-500 mt-1">专业护理人员上门服务</p>
        </div>
        <div class="bg-red-50 text-red-500 px-2 py-1 rounded text-xs">
          热门服务
        </div>
      </div>
      
      <div class="flex items-baseline mt-3">
        <span class="text-xl text-red-500 font-bold">¥198/次</span>
        <span class="text-gray-400 line-through text-sm ml-2">¥298/次</span>
        <span class="text-xs bg-red-100 text-red-500 px-1 py-0.5 ml-2 rounded">6.6折</span>
      </div>
      
      <div class="flex items-center mt-3">
        <div class="text-sm text-gray-500">
          <span>已售: 1024</span>
          <span class="mx-3">|</span>
          <span>评分: 4.9</span>
          <span class="mx-3">|</span>
          <span>评价: 256</span>
        </div>
      </div>
      
      <div class="flex items-center mt-3">
        <span class="text-xs bg-orange-100 text-orange-500 px-2 py-0.5 mr-2 rounded">专业护理</span>
        <span class="text-xs bg-green-100 text-green-500 px-2 py-0.5 mr-2 rounded">上门服务</span>
        <span class="text-xs bg-blue-100 text-blue-500 px-2 py-0.5 rounded">全程保险</span>
      </div>
    </div>
    
    <!-- 优惠券 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <span class="text-sm font-medium">优惠</span>
          <div class="ml-4 flex">
            <span class="bg-red-100 text-red-500 text-xs px-1 py-0.5 rounded mr-2">首单立减30</span>
            <span class="bg-red-100 text-red-500 text-xs px-1 py-0.5 rounded">会员价¥168</span>
          </div>
        </div>
        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
      </div>
    </div>
    
    <!-- 服务套餐 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex justify-between items-center mb-4">
        <span class="text-sm font-medium">服务套餐</span>
        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
      </div>
      
      <div class="space-y-3">
        <div class="package-item p-3 active">
          <div class="flex justify-between items-center">
            <div>
              <h3 class="font-medium">基础护理套餐</h3>
              <p class="text-xs text-gray-500 mt-1">包含基础生活照料、健康监测</p>
            </div>
            <div class="text-right">
              <p class="text-red-500 font-medium">¥198/次</p>
              <p class="text-xs text-gray-400 line-through">¥298/次</p>
            </div>
          </div>
        </div>
        
        <div class="package-item p-3">
          <div class="flex justify-between items-center">
            <div>
              <h3 class="font-medium">高级护理套餐</h3>
              <p class="text-xs text-gray-500 mt-1">包含基础套餐+专业康复训练</p>
            </div>
            <div class="text-right">
              <p class="text-red-500 font-medium">¥298/次</p>
              <p class="text-xs text-gray-400 line-through">¥398/次</p>
            </div>
          </div>
        </div>
        
        <div class="package-item p-3">
          <div class="flex justify-between items-center">
            <div>
              <h3 class="font-medium">全面护理套餐</h3>
              <p class="text-xs text-gray-500 mt-1">包含高级套餐+专业医疗护理</p>
            </div>
            <div class="text-right">
              <p class="text-red-500 font-medium">¥398/次</p>
              <p class="text-xs text-gray-400 line-through">¥498/次</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 预约时间 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex justify-between items-center mb-4">
        <span class="text-sm font-medium">预约时间</span>
        <span class="text-xs text-gray-500">可预约未来7天</span>
      </div>
      
      <div class="mb-4">
        <h4 class="text-sm text-gray-500 mb-2">日期</h4>
        <div class="flex overflow-x-auto space-x-2 pb-2">
          <div class="time-slot px-3 py-2 text-center min-w-[70px] active">
            <p class="text-sm">今天</p>
            <p class="text-xs text-gray-500">10月25日</p>
          </div>
          <div class="time-slot px-3 py-2 text-center min-w-[70px]">
            <p class="text-sm">明天</p>
            <p class="text-xs text-gray-500">10月26日</p>
          </div>
          <div class="time-slot px-3 py-2 text-center min-w-[70px]">
            <p class="text-sm">周五</p>
            <p class="text-xs text-gray-500">10月27日</p>
          </div>
          <div class="time-slot px-3 py-2 text-center min-w-[70px]">
            <p class="text-sm">周六</p>
            <p class="text-xs text-gray-500">10月28日</p>
          </div>
          <div class="time-slot px-3 py-2 text-center min-w-[70px]">
            <p class="text-sm">周日</p>
            <p class="text-xs text-gray-500">10月29日</p>
          </div>
        </div>
      </div>
      
      <div>
        <h4 class="text-sm text-gray-500 mb-2">时段</h4>
        <div class="grid grid-cols-3 gap-2">
          <div class="time-slot py-2 text-center active">
            <p class="text-sm">上午</p>
            <p class="text-xs text-gray-500">9:00-12:00</p>
          </div>
          <div class="time-slot py-2 text-center">
            <p class="text-sm">下午</p>
            <p class="text-xs text-gray-500">14:00-17:00</p>
          </div>
          <div class="time-slot py-2 text-center">
            <p class="text-sm">晚上</p>
            <p class="text-xs text-gray-500">19:00-21:00</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 服务人员 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-medium">推荐服务人员</h3>
        <a href="#" class="text-sm text-gray-500 flex items-center">
          查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
        </a>
      </div>
      
      <div class="flex overflow-x-auto space-x-4 pb-2">
        <div class="flex flex-col items-center min-w-[70px]">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center text-lg font-bold">张</div>
          <p class="text-sm mt-1">张阿姨</p>
          <div class="flex text-yellow-400 text-xs">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
        </div>
        
        <div class="flex flex-col items-center min-w-[70px]">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center text-lg font-bold">李</div>
          <p class="text-sm mt-1">李大姐</p>
          <div class="flex text-yellow-400 text-xs">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
        </div>
        
        <div class="flex flex-col items-center min-w-[70px]">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center text-lg font-bold">王</div>
          <p class="text-sm mt-1">王阿姨</p>
          <div class="flex text-yellow-400 text-xs">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
        </div>
        
        <div class="flex flex-col items-center min-w-[70px]">
          <div class="worker-avatar w-14 h-14 rounded-full flex items-center justify-center text-lg font-bold">赵</div>
          <p class="text-sm mt-1">赵阿姨</p>
          <div class="flex text-yellow-400 text-xs">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 服务评价 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-medium">服务评价 (256)</h3>
        <a href="#" class="text-sm text-gray-500 flex items-center">
          查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
        </a>
      </div>
      
      <div class="mb-4">
        <div class="flex items-center mb-2">
          <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-2">
            <span class="text-sm">陈</span>
          </div>
          <div>
            <p class="text-sm font-medium">陈**</p>
            <div class="flex text-yellow-400 text-xs">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
        </div>
        <p class="text-sm text-gray-600">护理人员非常专业，服务态度很好，老人很满意。按摩手法专业，老人说舒服多了，血液循环也改善了。</p>
        <p class="text-xs text-gray-400 mt-1">2023-10-20</p>
      </div>
      
      <div>
        <div class="flex items-center mb-2">
          <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-2">
            <span class="text-sm">刘</span>
          </div>
          <div>
            <p class="text-sm font-medium">刘**</p>
            <div class="flex text-yellow-400 text-xs">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </div>
        </div>
        <p class="text-sm text-gray-600">阿姨很细心，不仅照顾了老人的生活起居，还帮忙整理了房间，非常贴心。老人很喜欢她，已经预约了下周的服务。</p>
        <p class="text-xs text-gray-400 mt-1">2023-10-18</p>
      </div>
    </div>
    
    <!-- 服务详情 -->
    <div class="bg-white mt-2 p-4 mb-20">
      <h3 class="font-medium mb-4">服务详情</h3>
      
      <div class="space-y-4">
        <div>
          <h4 class="text-sm font-medium mb-2">服务内容</h4>
          <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
            <li>生活照料：协助老人洗漱、进食、如厕等</li>
            <li>健康监测：测量血压、体温等基础健康指标</li>
            <li>康复护理：根据需要进行简单的肢体活动</li>
            <li>陪伴聊天：与老人进行交流，缓解孤独感</li>
            <li>用药提醒：按医嘱提醒老人按时用药</li>
            <li>简单家务：整理床铺、清洁老人居住环境</li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-sm font-medium mb-2">服务流程</h4>
          <ol class="list-decimal list-inside text-sm text-gray-600 space-y-1">
            <li>下单预约：选择服务套餐、时间和地点</li>
            <li>确认订单：客服确认订单信息并安排护理人员</li>
            <li>上门服务：护理人员准时上门提供服务</li>
            <li>服务确认：服务完成后，确认服务内容</li>
            <li>评价反馈：对本次服务进行评价</li>
          </ol>
        </div>
        
        <div>
          <h4 class="text-sm font-medium mb-2">服务保障</h4>
          <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
            <li>专业护理：所有护理人员均持证上岗</li>
            <li>安全保障：服务全程保险，意外理赔</li>
            <li>准时服务：超时15分钟即可申请退款</li>
            <li>满意度保证：服务不满意可申请重新服务</li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-sm font-medium mb-2">注意事项</h4>
          <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
            <li>请提前准备好服务所需的基本物品</li>
            <li>如需取消服务，请提前4小时告知</li>
            <li>特殊医疗护理需提前告知并确认</li>
            <li>服务人员不提供非约定的额外服务</li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white bottom-bar flex z-20" style="width: 375px; margin: 0 auto;">
      <div class="flex-1 flex">
        <a href="#" class="flex flex-col items-center justify-center w-1/2 py-2">
          <i class="fas fa-headset text-gray-500"></i>
          <span class="text-xs text-gray-500 mt-1">客服</span>
        </a>
        <a href="#" class="flex flex-col items-center justify-center w-1/2 py-2">
          <i class="fas fa-phone text-gray-500"></i>
          <span class="text-xs text-gray-500 mt-1">电话咨询</span>
        </a>
      </div>
      <div class="flex-1">
        <button class="w-full h-full bg-orange-500 text-white text-sm font-medium">立即预约</button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 套餐选择
      const packageItems = document.querySelectorAll('.package-item');
      packageItems.forEach(item => {
        item.addEventListener('click', function() {
          packageItems.forEach(pkg => pkg.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 日期选择
      const dateSlots = document.querySelectorAll('.mb-4 .time-slot');
      dateSlots.forEach(slot => {
        slot.addEventListener('click', function() {
          dateSlots.forEach(s => s.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 时段选择
      const timeSlots = document.querySelectorAll('.grid .time-slot');
      timeSlots.forEach(slot => {
        slot.addEventListener('click', function() {
          timeSlots.forEach(s => s.classList.remove('active'));
          this.classList.add('active');
        });
      });
    });
  </script>
</body>
</html> 